<template>
  <view class="uni-tooltip">
    <slot></slot>
    <view v-if="content || $slots.content" class="uni-tooltip-popup">
      <slot name="content">
        {{ content }}
      </slot>
    </view>
  </view>
</template>

<script lang="ts">
/**
 * Tooltip 提示文字
 * @description 常用于展示鼠标 hover 时的提示信息。
 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-tooltip
 * @property {String} content   弹出层显示的内容
 * @property {String}  placement出现位置, 目前只支持 left
 */

export default {
  name: "uni-tooltip",
  data() {
    return {};
  },
  props: {
    content: {
      type: String,
      default: "",
    },

    placement: {
      type: String,
      default: "bottom",
    },
  },
};
</script>

<style>
.uni-tooltip {
  position: relative;
  cursor: pointer;
}

.uni-tooltip-popup {
  z-index: 1;
  display: none;
  position: absolute;
  left: 0;
  background-color: #333;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  text-align: left;
  line-height: 16px;
  padding: 12px;
}

.uni-tooltip:hover .uni-tooltip-popup {
  display: block;
}
</style>
